<template>
  <view >
	  <div class="single-container"  v-for="(item, index) in message" :key="index">
		  <div class="topcontainer">
			  <div class="title" >{{item.title}}</div>
			  <div class="incon" @click="gotoinfo(item)"><uni-icons type="right" size="1rem"></uni-icons></div>
		  </div>
		  <div class="mincon"></div>
		  <div class="containerbox">
			  
			  <div class="containerbox-lef">
				  <div class="time">{{item.createtime}}</div>
				  <div class="type">工具库</div>
			  </div>
			  <div class="containerbox-img">
			  				<img v-if="item.runimg!==''" :src='item.runimg'>
			  </div>
		  </div>
	 </div>
  </view>
</template>

<script>
export default {
  name: 'MyTemplateComponent',
  props: {
      message: {
        type: Array, // 定义 prop 的类型
        required: true // 设置此 prop 为必需
      }
    },
  data() {
    return {
		parm:this.message
      // 在这里添加数据

    };
  },
  computed: {
    // 计算属性
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  },
  mounted() {
    // 组件挂载完成后执行
    // console.log('Component has been mounted.');
  },
  methods: {
    gotoinfo(e) {
     uni.navigateTo({
     	url: `/pages/home/components/detailsone?companyOrgId=${e.articleid}` // 注意路径格式  
     });
    }
  }
};
</script>

<style scoped lang="scss">
	.mincon{
		width: 0.3rem;
		height: 1rem;
		background-color: #ff682c;
		position: relative;
		    left: -0.5rem;
		    border-radius: 0px 0.2rem 0.2rem 0px;
	
	}
/* 在这里添加样式 */
.single-container{
	    border-radius: 0.4rem;
	    margin: 0.7rem;
	    padding: 0.5rem;
	    background: #fff;
	.topcontainer{
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		
		.title{
			font-size: 1rem;
		}
		.incon{
			
		}
	}
	.containerbox{
		    display: flex;
			    justify-content: space-between;
		.containerbox-lef{
			    display: flex;
			    flex-direction: column;
			.time{
				flex: 1;
				display: flex;
				    align-items: center;
				    justify-content: flex-start;
					font-size: 0.8rem;
					    color: #565151;
			}
			.type{
				flex: 1;
				display: flex;
				    align-items: center;
				    justify-content: flex-start;
					font-size: 0.8rem;
					    color: #565151;
			}
		}
		.containerbox-img{
			width: 6rem;
			height: 5rem;
			img{
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}
	}
}
</style>
